<template>
  <el-drawer :title="title" v-model="visible" :direction="direction" :size="800" :before-close="beforeClose">
    <section class="drawer-main edit-box">
      <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="120px">
        <el-form-item label="事件名称" prop="evtName">
          <el-input v-model="ruleForm.evtName" />
        </el-form-item>
        <el-form-item label="所属应用" prop="appId">
          <el-select v-model="ruleForm.appId" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="(item, index) in appList" :key="index" :label="item.appName + '-' + item.orgName"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="消费者总数限制" prop="subscriberCnt">
          <el-input v-model="ruleForm.subscriberCnt" type="Number" />
        </el-form-item>
        <el-form-item label="主题" prop="topicName">
          <el-input v-model="ruleForm.topicName" />
        </el-form-item>
        <!-- 频率和天数字段没加 -->
        <el-form-item label="频率" prop="topicName1">
          <el-input v-model="ruleForm.topicName" />
        </el-form-item>
        <el-form-item label="保存天数" prop="topicName2">
          <el-input v-model="ruleForm.topicName" />
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="ruleForm.memo" />
        </el-form-item>
        <el-form-item label="服务转事件" prop="memo">
          <el-switch v-model="ruleForm.svcToEvt" active-text="是" inactive-text="否"></el-switch>
        </el-form-item>
        <el-divider></el-divider>
        <div v-if="ruleForm.svcToEvt">
          <el-form-item label="选择服务" prop="memo">
            <el-select v-model="ruleForm.svcId" placeholder="请选择" style="width: 100%" filterable>
              <el-option v-for="(item, index) in serviceList" :key="index" :label="item.svcName" :value="item.svcId" />
            </el-select>
          </el-form-item>
          <el-form-item label="定时" prop="memo">
            <el-input v-model="ruleForm.cron" disabled class="append-button">
              <template #append>
                <el-button type="primary" @click="showDialog">生成 cron</el-button>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </section>
    <footer class="drawer-footer">
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
      <el-button @click="beforeClose">取 消</el-button>
    </footer>
    <el-dialog title="生成 cron" v-model="showCron">
      <vcrontab @hide="showCron = false" @fill="crontabFill" :expression="expression"></vcrontab>
    </el-dialog>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref, onMounted } from "vue";
import { updateEvent, createEvent } from "@/api/event.js";
import vcrontab from "@/components/VcronTab/Crontab.vue";
// import { createDataSource, updateDataSource } from "@/api/adaptation";
import useEditDrawer from "@/hooks/useEditDrawer";
import { getServieList } from "@/api/service.js";
import { isChartacter } from "@/utils/index.js";
export default defineComponent({
  name: "EditDialog",
  emits: ["update:modelValue", "update-list"],
  components: { vcrontab },
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => { },
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
    appList: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    // 表单
    const DEFAULT_FORM = {
      evtName: "",
      appId: "",
      subscriberCnt: "",
      svcToEvt: false,
    };
    const appList = ref([]);
    const serviceList = ref([]);
    const serviceSwitch = ref(false);
    onMounted(async () => {
      let res2 = await getServieList({ current: 1, size: 100, onlineSts: "A" });
      serviceList.value = res2.data.list;
    });
    // 验证
    const rules = computed(() => {
      const baseRules = {
        evtName: [
          { required: true, message: "请输入事件名称", trigger: "blur" },
        ],
        appId: [
          { required: true, message: "请选择所属应用", trigger: "change" },
        ],
        topicName: [
          { required: true, validator: isChartacter, trigger: "blur", },
        ],
        subscriberCnt: [
          { required: true, message: "请输入消费者总数限制", trigger: "blur" },
        ],
      };
      if (props.type === "update") {
        // 如果是编辑
      }

      return baseRules;
    });

    const {
      visible,
      direction,
      loading,
      ruleForm,
      ruleFormRef,
      close,
      submit,
      beforeClose,
    } = useEditDrawer({
      createApi: createEvent,
      editApi: updateEvent,
      defaultForm: DEFAULT_FORM,
      emit,
      type: props.type,
      props,
    });
    const title = ref("注册事件");
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...DEFAULT_FORM,
          ...props.item,
        };
        serviceSwitch.value = props.item.svcId ? props.item.svcId : false;
        appList.value = props.appList;
        // console.log(props.appList);
        console.log("显示时赋值");
      }
    });
    // 生成cron
    const expression = ref("");
    const showCron = ref(false);
    const crontabFill = (value) => {
      ruleForm.value.cron = value;
    };
    const showDialog = () => {
      expression.value = ruleForm.value.cron;
      showCron.value = true;
    };

    return {
      loading,
      visible,
      direction,
      ruleFormRef,
      ruleForm,
      rules,
      title,
      close,
      submit,
      appList,
      serviceList,
      beforeClose,
      serviceSwitch,
      expression,
      showCron,
      crontabFill,
      showDialog,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;

.drawer-main {
  height: calc(100% - 50px);
}

.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
}

.tip-text {
  text-align: right;
  color: #ca2e2e;
  margin-top: -10px;
}
</style>
